<template>
    <div class="BillDeliveryAddress" v-loading="isLoading">
        <cardComponent pageTitle="申请处理类-->账单寄送方式">
            <template slot="cardBody">
                <div class="dialogVisible">
                    <el-form :model="formData" size="small" label-width="40%">
                        <el-form-item label="账户类别:" label-position="left" prop="mainCardNo">
                            <el-input disabled v-model="accountType" style="width: 200px;"></el-input>
                        </el-form-item>

                        <el-form-item
                            label="账单寄送地址:"
                            label-position="left"
                            prop="ADD1"
                        >{{ formData.ADD1 + '' + formData.ADD2 + '' + formData.ADD3 + '' + formData.ADD4 +'' + formData.ADD5}}</el-form-item>

                        <el-form-item
                            label="EMAIL地址:"
                            label-position="left"
                            prop="EMAIL"
                        >{{ formData.EMAIL }}</el-form-item>

                        <el-form-item
                            label="当前账单寄送方式:"
                            label-position="left"
                            prop="STMCODE"
                        >{{ formData.STMCODE | getMethodTxt }}</el-form-item>

                        <el-form-item label-position="left" prop="transid" label="新的账单递送方式:">
                            <el-select placeholder="请选择" v-model="SISTMCD" clearable>
                                <el-option
                                    v-for="item in newBillMethod"
                                    :key="item.id"
                                    :label="item.label"
                                    :value="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <div class="btnBox">
                            <!-- <el-button type="primary" size="small" @click="hanleCancel">取消</el-button> -->
                            <el-button
                                type="primary"
                                size="small"
                                @click="hanleSure"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                plain
                                @click="customerInfo"
                            >客户资料修改</el-button>
                            <el-button type="primary" size="small" @click="refresh">刷新</el-button>
                        </div>
                    </el-form>
                </div>
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { reolaceString, getDictSelectList, getAccountTypeName } from '@/utils/Common';
import { BILLINGMETHOD } from '@/utils/Contants';
import cardComponent from '@/components/cardComponent/cardComponent.vue';

export default {
    name: 'BillDeliveryAddress',
    components: {
        cardComponent,
    },
    data() {
        return {
            formData: {

            },
            SISTMCD: '', // 账单寄送方式
            SERCNT: '99999999999999999999', // 点击按钮确定账单寄送方式的取消，修改
            newBillMethod: [

            ],
            isLoading: false, // 取消loading
            accountType: '',
        };
    },
    filters: {
        getMethodTxt(val) {
            if (val === undefined) {
                return '无任何账单寄送方式';
            }
            const txt = val.trim();
            let text = '';
            BILLINGMETHOD.forEach((item) => {
                if (item.value === txt) {
                    text = item.label;
                }
            });
            return text;
        },
    },
    created() {

    },
    async mounted() {
        // 进入页面获取信息
        this.getDateInfo();
        this.SISTMCD = 'EM';
        this.accountType = await getAccountTypeName(this.cardList_3601, this.cardInfo_3004, this);
    },
    computed: {
        ...mapState({
            cardInfo_3004: state => state.common.cardInfo_3004,
            cardList_3601: state => state.common.cardList_3601,
            defaultParams: state => state.common.defaultParams,
            defaultpinFlag: state => state.common.pinFlag,
        }),
    },
    methods: {
        // 进页面获取页面信息
        async getDateInfo() {
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                OPT: '1', // 查询方式 1-卡号查询  2-证件号查询
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                PIN: '12345678', // 密码
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '3014';
            defaultParams.body.appBody = appBody;
            // 3014交易
            this.$post.common.transPort(defaultParams).then((res) => {
                if (res.status === 200) {
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result');
                    if (result.sysHead.rspCd === '000000') {
                        this.formData = result.body.appBody || [];
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alet('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });

            this.newBillMethod = await getDictSelectList('STMCD', this);
        },


        // 点击取消按钮
        // hanleCancel() {
        //     this.SERCNT ='93999900000000000000'
        //     this.$confirm('确定取消账单寄送方式?').then( () => {
        //         this.handleBinding();
        //     }).catch(() => {

        //     })

        // },
        // 点击确定
        hanleSure() {
            const EMAIL = this.formData.EMAIL.trim();
            if (EMAIL === '') {
                this.$alert(
                    '预留电子邮件地址不能为空!',
                    '提示',
                    {
                        customClass: 'warning', type: 'warning',
                    },
                );
            } else {
                if (this.SISTMCD.trim() === '') {
                    this.SERCNT = '93999900000000000000';
                } else if (this.SISTMCD.trim() === 'EM') {
                    this.SERCNT = '91999900000000000000';
                } else if (this.SISTMCD.trim() === 'IE') {
                    this.SERCNT = '96999900000000000000';
                } else if (this.SISTMCD.trim() === 'LT') {
                    this.SERCNT = '90999900000000000000';
                } else if (this.SISTMCD.trim() === 'LE') {
                    this.SERCNT = '92999900000000000000';
                }

                this.$confirm('确定修改账单寄送方式?', '提示', { customClass: 'warning', type: 'warning' }).then(() => {
                    this.handleBinding();
                }).catch(() => {

                });
            }
        },
        // 客户资料修改
        customerInfo() {
            this.$router.push({ path: '/customerInfomationChange/customerInfoChange' });
        },
        // 账单寄送方式操作
        handleBinding() {
            this.isLoading = true;
            const appBody = {
                CARDNBR: this.cardInfo_3004.CARDNO || '', // 卡号
                PINFLAG: this.defaultpinFlag, // 是否检查密码标志
                SERCNT: this.SERCNT, // 0为不开通 1为开通 9为不作修改
                SISTMCD: this.SISTMCD, // 账单寄送方式
                STSCHK: 'N', // N：不检查，任何状态都允许操作 其他：检查 卡片检查状态
            };
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '4012';
            defaultParams.body.appBody = appBody;
            // 4012交易
            this.$post.common.transPort(defaultParams).then((res) => {
                this.tableLoading = false;
                if (res.status === 200) {
                    this.isLoading = false;
                    const result = JSON.parse(res.data.jsonRes);
                    // console.log(result, 2222)
                    if (result.sysHead.rspCd === '000000') {
                        this.searchForm = result.body.appBody || [];
                        this.getDateInfo();
                        this.$alert(
                            result.sysHead.rspMsg,
                            '提示',
                            {
                                customClass: 'success', type: 'success',
                            },
                        );
                    } else {
                        const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspMsg}`;
                        this.$alert(errorMsg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                } else {
                    this.$alert('请求失败！', '提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            });
        },
        // 刷新按钮
        refresh() {
            this.getDateInfo();
            this.SISTMCD = 'EM';
        },
    },
};
</script>

<style lang='scss'>
.BillDeliveryAddress {
    width: 98%;
    background: #fff;
    // padding:10px;
    box-sizing: border-box;
    border-radius: 5px;

    .dialogVisible {
        margin: 30px auto 0;
        .el-form-item__content {
            text-align: left;
        }
        .el-form-item {
            margin: 18px auto 0;
            width: 50%;
        }
    }

    .btnBox {
        text-align: center;
        margin: 30px auto;
    }
}
</style>
